<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const useMenus = ref([
    { name: '首页', url: '/home/index' },
    { name: '私信', url: '/home/message' },
    { name: '个人中心', url: '/home/person' }
])

//刷新
const handleLogoClick = () => {
    window.location.reload()
}
</script>

<template>
    <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item @click="handleLogoClick">
            <img src="@/assets/images/logo.jpg" alt="Logo" style="width:150px; cursor: pointer;">
        </el-menu-item>
        <el-menu-item :index="v.url" v-for="v in useMenus" :key="v.url">
            <span>{{ v.name }}</span>
        </el-menu-item>
    </el-menu>
</template>

<style scoped>
.el-container .el-header {
    padding: 0;
}
.el-header  .el-menu--horizontal{
    border:0;
    width:630px !important;
    margin-left:25px;
    margin-right:15px;
    display: flex;
    align-items:center;
} 
</style>